<template>
    <div class="container flex-row">
        <div :style="flexMenuStyle" class="container-menu">
            <vuedraggable v-model="transitionList">
                <transition-group>
                    <el-tooltip class="item" effect="dark"
                        placement="right"
                        v-for="worksheet in worksheetInfoList"
                        :key="worksheet.id"
                        :content="worksheet.name" 
                    >
                        <router-link class="container-menu-item flex-row" 
                            active-class="menu-active" 
                            :to="`/app/${appId}/${groupId}/${worksheet.id}`"
                        >
                            <span class="menuIcon" :class="[logoIconFontFamily, worksheet.icon?logoIconProfix+worksheet.icon:logoIconProfix+worksheetDefaultIcon]"></span>
                            <div class="menu-title">{{worksheet.name}}</div>
                            <span v-show="worksheet.hidden" class="iconfont cgsIcon-yincang" style="color:#999"/>
                        </router-link>
                    </el-tooltip>
                </transition-group>
            </vuedraggable>
            
            <el-tooltip class="item" effect="dark"
                v-if="checkEditAuth()"
                placement="right"
                content="新建应用项"
            >
                <el-dropdown trigger="click" 
                    style="width: 100%" 
                    placement="bottom"
                    @command="handleAddPageCommand"
                >
                    <div class="container-menu-item flex-row">
                        <i class="menu-icon el-icon-plus" style="font-size: 16px; color: rgba(0,0,0,0.3); margin-right: 5px; line-height: 40px;margin-top:unset;margin-left: unset;text-align: center;"></i>
                        <div class="menu-title" style="color: rgba(0,0,0,0.3)">新建应用项</div>
                    </div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="worksheet">工作表</el-dropdown-item>
                        <el-dropdown-item command="customPage">自定义页面</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                
            </el-tooltip>
        </div>
        <div :style="flexBtStyle" class="container-content">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
        <el-dialog
            :title="dialogData.title"
            :visible.sync="dialogData.visible"
            width="30%"
            @close="dialogData.visible = false">
            <el-form :model="formData" ref="appForm" :rules="rules" label-width="80px">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleOK">确定</el-button>
                    <el-button @click="dialogData.visible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
    
</template>

<script>
import {getWorksheetGroupDetail, updateWorksheetSort} from"@/api/app"
import {addWorksheet} from"@/api/worksheet"
import vuedraggable from 'vuedraggable';
import { profix, font_family, defaultIcon_worksheet } from "@/util/LOGO_ICON_CONFIG"

export default {
    components:{
        vuedraggable
    },
    data(){
        return {
            worksheetDefaultIcon: defaultIcon_worksheet,
            logoIconFontFamily: font_family,
            logoIconProfix: profix,
            flexBt: 'arrow-left',
            dialogData: {
                title: '新建工作表',
                visible: false
            },
            formData: {
                name: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入工作表名称', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        checkEditAuth(){
            let flag = false
            let {isFormAuth, auth} = this.appAuths
            if(isFormAuth){
                if(auth.FORM_ADD){
                    flag = true
                }
            }else{
                if(auth.EDIT_FORM || auth.EDIT_FORM2 || auth.EDIT_FORM3){
                    flag = true
                }
            }
            return flag
        },
        handleAddPageCommand(command) {
            if(command === 'worksheet') {
                this.dialogData = {
                    title: '新建工作表',
                    visible: true
                }
            } else if(command === 'customPage'){
                this.dialogData = {
                    title: '新建自定义页面',
                    visible: true
                }
            }
        },
        handleOK(){
            this.$refs['appForm'].validate(async (valid) => {
                if (valid) {
                    if(this.dialogData.title === "新建工作表") {
                        let data = await addWorksheet({
                            name: this.formData.name,
                            appId: this.appId,
                            groupId: this.groupId,
                            config: '',
                            type: 0
                        })
                        this.$router.push(`/vform/${this.appId}/${this.groupId}/${data.id}`)
                    } else if(this.dialogData.title === "新建自定义页面") {
                        let data = await addWorksheet({
                            name: this.formData.name,
                            appId: this.appId,
                            groupId: this.groupId,
                            config: '',
                            type: 1
                        })
                        this.$router.push(`/customWeb/${this.appId}/${this.groupId}/${data.id}`)
                    }
                } else {
                    return false;
                }
            });
        },
    },
    computed: {
        appId() {
            return this.$route.params.appId;
        },
        groupId() {
            return this.$route.params.groupId;
        },
        worksheetId() {
            return this.$route.params.worksheetId;
        },
        worksheetInfoList() {
            let worksheetList = this.$store.state.worksheetList
            return worksheetList
        },
        tableMenuExtend() {
            return this.$store.state.tableMenuExtend
        },
        flexMenuStyle() {
            return this.tableMenuExtend ? {width: '240px'}:{width: '40px'}
        },
        flexBtStyle() {
            return this.tableMenuExtend ? {left: '240px'}:{left: '40px'}
        },
        transitionList:{
            get() {
                return this.$store.state.worksheetList
            },
            set(value) {
                this.$store.commit('updateWorksheetList', value)
            }
        },
        appAuths() {
            let appAuths = this.$store.state.appAuths
            let newAppAuths = {
                auth:{},
                isFormAuth: appAuths.isFormAuth
            }
            if(!appAuths || !appAuths?.appAuth){
                return newAppAuths
            }
            if(this.worksheetId !== undefined){
                if(!appAuths.isFormAuth){
                    newAppAuths.auth = appAuths.appAuth
                }
                else {
                    newAppAuths.auth = appAuths.formAuth[this.worksheetId] || {}
            
                    newAppAuths.auth["FORM_ADD"] = appAuths.appAuth.FORM_ADD ? true : false
                }
            }
            return newAppAuths
        },
    },
    async created() {
        if(this.groupId === 'workflow') return
        
        let data = await getWorksheetGroupDetail(this.groupId)
        let list = data?.worksheetInfoList || []
        this.$store.commit('updateWorksheetList', list)
        if(!this.worksheetId || this.worksheetId === 'undefined') {
            let worksheetId = list[0]?.id || null
            this.$router.push(`/app/${this.appId}/${this.groupId}/${worksheetId}`)
        }
    },
    watch: {
        async $route(to, from) {
            if(to.params.groupId === from.params.groupId) return
            if(this.groupId === 'workflow') return
            let data = await getWorksheetGroupDetail(this.groupId)
            let list = data?.worksheetInfoList || []

            let worksheet = list.find(w => this.worksheetId === w.id)
            
            if(!this.worksheetId || !worksheet || this.worksheetId === 'undefined') {
                let worksheetId = list[0]?.id || null
                this.$router.push(`/app/${this.appId}/${this.groupId}/${worksheetId}`)
            }
            this.$store.commit('updateWorksheetList', list)
        },
        async transitionList(){
            let worksheetInfoIds = this.transitionList.map(l => l.id)
            await updateWorksheetSort({
                "id": this.groupId,
                worksheetInfoIds,
            })
        }
    },
}
</script>

<style scoped>
.container{
    top: 50px;
}

.container-content{
    padding: 5px 15px 5px 20px;
}
.arrow-left, .arrow-right {
    color: #8f8f8f;
    border-radius: 0 20px 20px 0;
    border-top: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    line-height: 120px;
    text-align: center;
    font-weight: bolder;
}
</style>